<template>
  <div class="works">
    <navbar :title="user.name" @back="$router.back()"></navbar>
    <van-tabs v-model="active" @click="onClick">
      <van-tab title="作品">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="list" v-for="(item, index) in worksList" :key="index">
            <div class="title" @click="toDetail">
              <div class="info">
                <img :src="user.photo" alt="" />
                <div>
                  <span class="name">{{ item.aut_name }}</span>
                  <span class="time">{{ item.pubdate | findTime }}</span>
                </div>
              </div>
              <h4>{{ item.title }}</h4>
              <van-grid :border="false" :column-num="3">
                <van-grid-item
                  v-for="(myitem, myindex) in item.cover.images"
                  :key="myindex"
                >
                  <van-image :src="myitem" />
                </van-grid-item>
              </van-grid>
            </div>
            <div class="grid">
              <van-grid :column-num="3" direction="horizontal">
                <van-grid-item icon="comment-o" text="166" />
                <van-grid-item icon="good-job-o" text="65" />
                <van-grid-item icon="star-o" text="85" />
              </van-grid>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="公告">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="gonggaoList"
            v-for="(item, index) in results"
            :key="index"
          >
            <div class="item">
              <h4>
                {{ item.title }}
              </h4>
              <div class="time">{{ item.pubdate | findTime }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="数据">
        <div class="data">
          <div class="fans">
            <span class="fansnum">{{ fans_count }}</span>
            <span class="fanstitle">粉丝数</span>
          </div>
          <div class="num">
            <span class="read">{{ read_count }}</span>
            <span class="total">累计阅读量</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入网络请求
import { getAnnouncements, getArticles, getFigure } from '../../../api/user'
import { mapState } from 'vuex'
export default {
  name: 'works',
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      active: 0,
      // 作品列表
      worksList: [],
      finished: false,
      loading: false,
      total_count: 0,
      page: 0,
      page1: 0,
      historiesList: [],
      // 公告数据
      results: [],
      fans_count: '',
      read_count: ''
    }
  },
  methods: {
    // 点击跳转详情页
    toDetail (item) {
      // console.log(item.art_id)
      this.$router.push(`/detail/${item.art_id}`)
    },
    async getData () {
      if (this.active === 0) {
        this.page += 1
        this.worksList = []
        // console.log(22222)
        const res = await getArticles()
        // console.log(res)
        const arr = res.data.data.results
        this.worksList.push(...arr)
        this.total_count = res.data.data.total_count
        this.loading = false
        if (this.worksList.length === this.total_count) {
          this.finished = true
        }
      } else if (this.active === 1) {
        this.page1 += 1
        this.results = []
        // console.log(7777)
        const res = await getAnnouncements()
        // console.log(res)
        const arr = res.data.data.results
        this.results.push(...arr)
        this.total_count = res.data.data.total_count
        this.loading = false
        if (this.results.length === this.total_count) {
          this.finished = true
        }
      }
    },
    // 点击切换
    onClick () {
      this.getData()
    },
    // 下拉刷新
    onLoad () {
      this.getData()
    }
  },
  async created () {
    const res = await getFigure()
    console.log(res)
    this.read_count = res.data.data.read_count
    this.fans_count = res.data.data.fans_count
  }
}
</script>

<style lang="less" scoped>
.works {
  background-color: #f5f7f9;
  height: 100vh;
  .list {
    margin-top: 5px;
    background-color: #fff;
    .title {
      padding: 0px 15px;
      .info {
        display: flex;
        padding-top: 20px;
        align-items: center;
        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        div {
          padding-left: 8px;
          display: flex;
          flex-direction: column;
          .name {
            font-size: 14px;
            color: #222222;
          }
          .time {
            padding-top: 5px;
            font-size: 12px;
            color: #999999;
          }
        }
      }
      h4 {
        font-size: 16px;
        margin-top: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .gonggaoList {
    background-color: #fff;
    .item {
      border-bottom: 1px solid #ececec;
      padding: 0px 15px;
      h4 {
        padding-top: 22px;
        font-size: 14px;
        color: #3a3a3a;
        line-height: 23px;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .time {
        padding-top: 19px;
        padding-bottom: 11px;
        font-size: 13px;
        color: #999999;
      }
    }
  }
  .data {
    height: 90px;
    background-color: #fff;
    margin-top: 5px;
    display: flex;
    align-items: center;
    .fans {
      align-items: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #ececec;
      .fansnum {
        font-size: 24px;
        color: #3a3a3a;
        font-weight: 700;
      }
      .fanstitle {
        margin-top: 11px;
        font-size: 13px;
        color: #999999;
      }
    }
    .num {
      align-items: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      .read {
        font-size: 24px;
        color: #3a3a3a;
        font-weight: 700;
      }
      .total {
        margin-top: 11px;
        font-size: 13px;
        color: #999999;
      }
    }
  }
}
</style>
